<script setup>
import Header from '@/components/header/Header.vue'
import Detail from './components/Detail.vue'
import PandaType from './components/PandaType.vue'
import PandaQRBanner from "./components/PandaQRBanner.vue"
import { ref } from "vue"
import { showConfirmDialog } from "vant"

import { useRoute, useRouter } from "vue-router"
import api from '@/api/index.js'
import pay from '@/utils/pay.js'

// 普通订单 订单状态:0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退
// 熊猫订单 订单状态 0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消
const route = useRoute()
const router = useRouter()

const data = ref('')
const loading = ref(false)
const _getPandaOrderDetail = () => {
  loading.value = true
  api.getPandaOrderDetail({
    orderNumber: route.params.id
  }).then((res) => {
    data.value = res.data
    _PandaQRBanner()
  }).finally(() => {
    loading.value = false
  })
}
_getPandaOrderDetail()

const _PandaQRBanner = () => {
  api.getPandaOrderCode({
    orderNumber: data.value.orderNumber
  }).then((res) => {
    console.log('res', res)
  })
}

const beforeClose = (action) => {
  if (action === 'cancel') {
    return true
  }
  return new Promise((resolve) => {
    api.getcancel({
      orderNumber: data.value.orderNumber
    }).then(() => {
      _getOrderInfo()
      resolve(true)
    }).catch(() => {
      resolve(false)
    })
  })
}
const handeldelorder = () => {
  showConfirmDialog({
    message: '确定取消该订单?',
    beforeClose
  })
}


// 继续支付
// pay.getPayld({ orderNumber: res.data })
// function handelnewpay(id){
//   pay.getPayld({ orderNumber: id })
// }
//
// const refundClick = () => {
//   router.push(`/scenic/refund/${route.params.id}`)
// }

</script>

<template>
  <div class="order_detail">
    <Header title="订单详情" :back="true" />
    <div class="content">
      <PandaType :data="data" :loading="loading" />
      <div class="card" :data="data">
        <div class="card_content">
          <template v-if="!loading">
            <div class="card_content_top">
              <div class="content_right">
                <div class="top">
                  <div class="name">
                    {{ data?.merchantName || data?.spuListVos[0].spuName}}
                  </div>
                  <div class="price">
                    <span class="icon">￥</span>
                    <span class="number">{{ data.actualPrice }}</span>
                  </div>
                </div>
                <div class="bottom">
                  <div class="bottom_list">
                    {{ `${data.spuListVos?.[0]?.orderSkuVo?.skuName}${data.spuListVos?.[0]?.orderSkuVo?.buyCount}` }} 张
                  </div>
                  <div class="bottom_list" v-if="data.useTime">过期时间: {{ data.useTime }}</div>
                </div>
              </div>
              <!--            <img :src="data?.merchantId" alt="" />-->
              <van-image
                  class="van_image"
                  width="8rem"
                  height="8rem"
                  fit="cover"
                  :src="data.spuListVos[0].imageId"
              />
            </div>
            <QRBanner :data="data" v-if="data.status === 1" class="qr_banner_components" />
          </template>
          <van-skeleton v-else>
            <template #template>
              <div :style="{ display: 'flex', width: '100%' }">
                <van-skeleton-image />
                <div :style="{ flex: 1, marginLeft: '16px' }">
                  <van-skeleton-paragraph row-width="60%" />
                  <van-skeleton-paragraph />
                  <van-skeleton-paragraph />
                  <van-skeleton-paragraph />
                </div>
              </div>
            </template>
          </van-skeleton>
        </div>
        <Detail :data="data" :loading="loading" />
      </div>
    </div>
<!-- 普通   订单状态:0-待支付 1-待核销 2-已核销 3-已取消 4-退款中 5-已退-->
<!-- 熊猫   0-待支付 1-待使用/待发货 2-待收货 3-已完成 4-退款单 6-订单已取消-->
<!--    <div v-if="[0, 1, 4].includes(data.status)" class="bottom_button">-->
<!--      <div @click="handelnewpay(data.orderNumber)" v-if="data.status === 0" class="button primary">继续支付 ¥{{ data.actualPrice }}</div>-->
<!--      <div @click.stop="handeldelorder(data.orderNumber)" v-if="data.status === 0" class="button default">取消订单</div>-->
<!--      <div v-if="data.status === 1" class="button default" @click="refundClick">申请退款</div>-->
<!--      <div v-if="data.status === 4" class="button default">撤销退款</div>-->
<!--    </div>-->
  </div>
</template>

<style scoped lang="scss">
.order_detail {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;

  .content {
    flex: 1;
    // overflow-y: auto;
    background-color: #F9F8F3;

    .card {
      margin: 1rem 1.5rem;
      padding: 1.5rem;
      background: #FFFFFC;
      box-shadow: 0 1.2rem 2rem 0 rgba(2, 95, 38, 0.05);
      border-radius: 1rem;

      .card_content {
        background: #FFFFFC;
        border-bottom: .1rem solid #EEEEEE;
        padding-bottom: 1.5rem;

        .card_content_top {
          display: flex;
          justify-content: space-between;
          flex-direction: row-reverse;
          height: 8rem;

          img {
            height: 8rem;
            width: auto;
            border-radius: .5rem;
          }

          .content_right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 1rem;

            .top {
              display: flex;
              justify-content: space-between;

              .name {
                font-size: 1.6rem;
                color: #333333;
                font-weight: bold;
                line-height: 1.9rem;
                word-break: break-all;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .price {
                color: #333333;
                margin-left: 1rem;
                font-weight: bold;

                .icon {
                  font-size: 1.4rem;
                }

                .number {
                  font-size: 1.8rem;
                }
              }
            }

            .bottom {
              color: #999999;
              font-size: 1.2rem;
              .bottom_list{
                height: 1.7rem;
                line-height: 1.7rem;
              }
            }
          }
        }

        .qr_banner_components {
          margin-top: 4rem;
        }
      }
    }
  }

  .bottom_button {
    display: flex;
    flex-direction: row-reverse;
    height: 6rem;
    padding: 1rem 1rem 0 0;
    box-sizing: border-box;

    .button {
      margin-left: .5rem;
      height: 3.8rem;
      line-height: 3.8rem;
      text-align: center;
      padding: 0 3rem;
      background: rgba(0, 0, 0, 0.05);
      border-radius: .5rem;
      font-size: 1.6rem;
    }

    .primary {
      background-color: var(--van-primary-color);
      color: #FFFFFF;
    }

    .primary:active {
      background: #4b947f;
    }

    .default {
      background: rgba(0, 0, 0, 0.05);
      color: #666666;
    }

    .default:active {
      background: rgb(215, 214, 214)
    }
  }
}</style>